<template>
	<div class="insert_div">
		
		<div class="top_div">
			<el-input v-model="keyword" placeholder="请输入 用户昵称/账号/昵称拼音 进行搜索" @input="search()"></el-input>
		</div>
		<div class="bottom_div">
			<!-- 搜索结果 -->
			<div v-for="user in userList" class="user_cls">
				<div style="width: 100%; display: flex; margin-left: 20px; align-items: center;">
					<el-image class="header_cls2" :src="$.getImg(user.header)" fit="cover"></el-image>
					<span style="margin-left: 20px;">{{user.nickname}}</span>
				</div>
				<div style="display: flex; flex-direction: row-reverse;">
					<el-button style="margin-right: 20px;" type="danger" size="small" @click="openDialog(user.id)">好友申请</el-button>
				</div>
			</div>
		</div>
		
		<!-- 好友申请的弹窗 -->
		<el-dialog
		  title="好友申请"
		  :visible.sync="dialogVisible"
		  :close-on-click-modal = "false"
		  width="30%">
		  <el-input v-model="form.beizhu" placeholder="好友的备注"/>
		  <el-input v-model="form.info" type="textarea" rows="4" placeholder="验证消息" style="margin-top: 20px;"></el-input>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="sendRequest()">发送申请</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultHeader: require("@/assets/header.png"),
				//搜索的用户列表
				userList:[],
				//搜索关键字
				keyword: "",
				//定时器的对象
				timeTask: null,
				//弹窗是否弹出的标志
				dialogVisible: false,
				//表单参数
				form: {
					//好友id
					toId: "",
					//备注
					beizhu: "",
					//验证消息:
					info: ""
				}
			}
		},
		methods: {
			//搜索的方法
			search(){
				//取消之前的定时器
				clearTimeout(this.timeTask);
				//创建新的定时器
				this.timeTask = setTimeout(() => {
					console.log("关键字：", this.keyword);
					this.$.ajax({
						type: "GET",
						url: "/user/search/" + this.keyword,
						success: (data) => {
							this.userList = data;
						}
					});
				}, 500);
			},
			//打开弹窗
			openDialog(uid) {
				//设置好友id
				this.form.toId = uid;
				//弹出框
				this.dialogVisible = true;
			},
			//发送好友验证请求
			sendRequest(){
				this.$.ajax({
					type: "POST",
					url: "/friendRequest/insert",
					data: this.form,
					success: (data) => {
						this.$message({
							message: "好友申请发送成功！",
							type: "success"
						});
						
						//关闭弹出框
						this.dialogVisible = false;
					}
				});
			}
		}
	}
</script>

<style>
	.insert_div {
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.bottom_div {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 20px;
	}
	
	.user_cls {
		width: 30%;
		height: 150px;
		margin: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.header_cls2 {
		width: 80px;
		height: 80px;
		border-radius: 40px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
</style>